import Vue from "vue";
import VueRouter from "vue-router";

// 将以下普通的导入形式改造成路由懒加载的形式，需要一个插件@babel/plugin-syntax-dynamic-import
// import Login from "../components/Login.vue";
// import Home from "../components/Home.vue";
// import Welcome from "../components/Welcome.vue";
const Login = () => import(/* webpackChunkName: "Login_Home_Welcome" */ '../components/Login.vue')
const Home = () => import(/* webpackChunkName: "Login_Home_Welcome" */ '../components/Home.vue')
const Welcome = () => import(/* webpackChunkName: "Login_Home_Welcome" */ '../components/Welcome.vue')

// import Users from "../components/user/Users.vue";
// import Rights from "../components/power/Rights.vue";
// import Roles from "../components/power/Roles.vue";
const Users = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/user/Users.vue')
const Rights = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Rights.vue')
const Roles = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Roles.vue')

// import Categories from "../components/goods/Categories.vue";
// import Params from "../components/goods/Params.vue";
const Categories = () => import(/* webpackChunkName: "Categories_Params" */ '../components/goods/Categories.vue')
const Params = () => import(/* webpackChunkName: "Categories_Params" */ '../components/goods/Params.vue')

// import GoodsList from "../components/goods/List.vue";
// import Add from "../components/goods/Add.vue";
const GoodsList = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/List.vue')
const Add = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/Add.vue')

// import Order from "../components/order/Order.vue";
// import Report from "../components/report/Report.vue";
const Order = () => import(/* webpackChunkName: "Order_Report" */ '../components/order/Order.vue')
const Report = () => import(/* webpackChunkName: "Order_Report" */ '../components/report/Report.vue')


Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    { path: "/", redirect: "/login" },
    { path: "/login", component: Login },
    {
      path: "/home",
      component: Home,
      redirect: "/welcome",
      children: [
        // 虽然里面的是子组件，但是请求的路径并不是/home/welcome，而是直接/welcome
        {
          path: "/welcome",
          component: Welcome
        },
        // 请求到/users的时候，让其携带着home组件的样式
        // 写在外面的话，就是全新的样式了
        {
          path: "/users",
          component: Users
        },
        {
          path: "/rights",
          component: Rights
        },
        {
          path: "/roles",
          component: Roles
        },
        {
          path: "/categories",
          component: Categories
        },
        {
          path: "/params",
          component: Params
        },
        {
          path: "/goods",
          component: GoodsList
        },
        {
          path: "/goods/add",
          component: Add
        },
        {
          path: "/orders",
          component: Order
        },
        {
          path: "/reports",
          component: Report
        },
        
      ]
    },
  ]
});

// 挂载全局前置路由导航守卫
// to 将要访问的路径
// from 代表从哪个路径跳转而来
// next 是一个函数，表示放行
//     next()  直接放行    next('/login')  强制跳转到login页面
router.beforeEach((to, from, next) => {
  if (to.path === "/login") return next();
  // 如果是想去有权限的页面，需要token
  const tokenStr = sessionStorage.getItem("token");
  if (!tokenStr) return next("/login");
  next();
});

export default router;
